//轮播图插件
var mySwiper = new Swiper ('.swiper', {
    loop : true,//循环播放
    pagination: {
        el: '.swiper-pagination',
        clickable :true,//分页器可以点击
      },//分页器
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },//按钮切换
      autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },//自动播放
    
  })  

  //需求  鼠标移入广告图 显示换页按钮 移出时隐藏
  //获取元素
  let banner=document.querySelector('.banner')
  let btnL=document.querySelector('.swiper-button-prev')
  let btnR=document.querySelector('.swiper-button-next')
  //console.log(banner);

  //注册时间
  banner.addEventListener('mouseover',function(){
        btnL.style.display='block';
        btnR.style.display='block';
  })
  banner.addEventListener('mouseout',function(){
    btnL.style.display='none';
    btnR.style.display='none';
})

//api鼠标移入改变背景色 和 图片

/* 
  鼠标移入li 改变li的背景色 和 li的img
*/
//获取元素
let apiList=document.querySelectorAll('#apiList li')
let img=document.querySelectorAll('#apiList li img')
//console.log(apiList);
//console.log(img);
//遍历li注册鼠标移入事件
apiList.forEach(function(dom,index){
    //鼠标移入改变背景色
    dom.addEventListener('mouseover',function(){
        this.style.backgroundColor='rgb(47,126,233)';
        img[index].src=`../imgs/api0${index+1}-c.svg`;
    })
    //鼠标移出时变回白色
    dom.addEventListener('mouseout',function(){
        this.style.backgroundColor='rgb(255,255,255)';
        img[index].src=`../imgs/api0${index+1}.svg`;
    })
    //鼠标点击跳转
    dom.addEventListener('click',function(){
        location.href='#';
    })
})



/* 需求  自动播放 跑马灯 清除上一个盒子类名 再给当前盒子添加类名 */
//获取变量
let imgBox=document.querySelectorAll('.img-box');

//定义计时器函数
function runHorseLemp(){
        imgBox[index].classList.remove('active')
    
        ++index
        if(index===imgBox.length)  index=0
    
        imgBox[index].classList.add('active')
}

//定义变量存放索引
let index=0;
let timeId=setInterval(runHorseLemp,2000)


/* 需求  当鼠标移入时 停止轮播  鼠标移开时 开始轮播 */

//获取变量
let indList=document.querySelector('.ind-list');

//注册时间
indList.addEventListener('mouseover',function(){
    clearInterval(timeId);
})

indList.addEventListener('mouseout',function(){
    timeId=setInterval(runHorseLemp,2000)
})


/* 
    需求 回到顶部
        1.首先 鼠标移入时 高亮显示 
          鼠标移出时 返回原状态
        2.滚动条滚动到指定位置显示图标 否则隐藏
        3.点击回到顶部 缓慢回到顶部
*/
//获取元素
let rTop=document.querySelector('.retop');

rTop.addEventListener('mouseover',function(){
    rTop.style.backgroundPositionY='-98px'
})

rTop.addEventListener('mouseout',function(){
    rTop.style.backgroundPositionY='-56px'
})

//注册窗口滚动条事件
window.addEventListener('scroll',function(){

    let top=document.documentElement.scrollTop

    if(top>=400){
        rTop.style.display='block';
    }else{
        rTop.style.display='none';
    }
})

rTop.addEventListener('click',function(){
    window.scrollTo({
        top:0,
        behavior:"smooth"
    })
})
      